<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card>
          <h1 style="color: orange;text-align: center">
            {{c.title}}</h1>
          <p style="font-size: 12px;color: #666;text-align: center">
            作者:{{c.nickname}} | 发布时间:{{c.createTime}} | 阅读次数:{{c.viewCount}}
          </p>
          <el-divider></el-divider>
          <div v-if="c.type!=5">
            <el-card style="font-size: 12px">
              <b style="color: #0aa1ed">摘要:</b>
              {{c.brief}}
            </el-card>
            <p v-html="c.content"></p>
          </div>
          <div v-else>
            <video style="width: 100%" :src="BASE_URL+c.videoUrl"
            controls type="video/mp4"></video>
          </div>
        </el-card>
        <!--   评论相关     -->
        <el-card style="margin-top: 10px;">
          <p>发一条友善的评论</p>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="22">
              <el-input v-model="comment.content" placeholder="请输入评论的内容"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="postComment()">发布</el-button>
            </el-col>
          </el-row>
          <!--     评论列表     -->
          <el-row style="margin-top: 10px" v-for="item in commentArr">
            <el-col :span="2">
              <el-avatar :src="BASE_URL+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="22">
              <span style="font-weight: bold;color: orange">{{item.nickname}}:</span>
              <p style="margin: 5px 0">{{item.content}}</p>
              <span style="font-size: 12px;color: #666">{{item.createTime}}</span>
            </el-col>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div id="head_div"></div>
          <div style="text-align: center;position: relative;top: -50px">
            <img :src="BASE_URL+c.userImgUrl"
                 style="border: 5px solid white;
                 border-radius: 90px;width: 90px;height: 90px">
            <p style="font-weight: bold;font-size: 20px;margin: 0">{{c.nickname}}</p>
            <i class="el-icon-edit">本文作者</i><br>
            <i class="el-icon-time">{{c.createTime}}</i>
          </div>
        </el-card>
        <!--    作者其它文章      -->
        <el-card style="margin: 10px 0">
          <h3>作者其它文章</h3>
          <el-divider></el-divider>
          <el-row :gutter="20" v-for="item in otherArr">
            <el-col :span="10">
              <a href="javascript:void(0)" @click="detail(item.id)">
                <img :src="BASE_URL+item.imgUrl" width="100%" height="70px">
              </a>
            </el-col>
            <el-col :span="14">
              <a href="javascript:void(0)" @click="detail(item.id)">
                <p class="title_p">{{item.title}}</p>
              </a>
              <i class="el-icon-time"> {{item.createTime}}</i>
            </el-col>
          </el-row>
        </el-card>
        <!--    热门文章     -->
        <el-card style="margin: 10px 0">
          <h3>热门文章</h3>
          <el-divider></el-divider>
          <el-row :gutter="20" v-for="item in hotArr">
            <el-col :span="10">
              <a href="javascript:void(0)" @click="detail(item.id)">
                <img :src="BASE_URL+item.imgUrl" width="100%" height="70px">
              </a>
            </el-col>
            <el-col :span="14">
              <a href="javascript:void(0)" @click="detail(item.id)">
                <p class="title_p" >{{item.title}}</p>
              </a>
              <i class="el-icon-time"> {{item.createTime}}</i>
            </el-col>
          </el-row>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "DetailView",
  data() {
    return {
      c: {},
      otherArr:[],
      hotArr:[],
      comment:{content:""},
      commentArr:[]
    }
  },
  methods: {
    postComment(){
      //设置文章id
      this.comment.contentId = this.c.id;
      //设置作者id
      let user = localStorage.user?JSON.parse(localStorage.user):null;
      if (user==null){
        alert("请先登录!");
        this.$router.push('/login');
        return;
      }
      this.comment.userId = user.id;
      //转换成搜索字符串
      let data = this.qs.stringify(this.comment);
      this.axios.post(this.BASE_URL+'/v1/comments/add-new',data)
      .then((response)=>{
        if (response.data.code==1){
          this.$message.success('评论成功!');
          this.loadCommentsById(this.c.id);
          this.comment.content='';
        }
      })
    },
    detail(id){
      //由于当前页面已经是/detail所以不会跳转页面,下面代码只是修改了地址栏中的id
      this.$router.push('/detail?id='+id);
      this.loadContentDetail(id);
      //加载评论
      this.loadCommentsById(id);
    },
    loadContentDetail(id){
      this.axios.get(this.BASE_URL+'/v1/contents/'+id+"/detail")
          .then((response)=>{
            if (response.data.code==1){
              this.c = response.data.data;
              //请求作者其它内容
              this.axios.get(this.BASE_URL+'/v1/contents/'+this.c.userId+'/other')
                  .then((response)=>{
                    if (response.data.code==1){
                      this.otherArr = response.data.data;
                    }
                  })
            }
          })
    }
    ,loadCommentsById(id){
      this.axios.get(this.BASE_URL+'/v1/comments/'+id).
      then((response)=>{
        if (response.data.code==1){
          this.commentArr = response.data.data;
        }
      })
    }
  },
  mounted() {
    let id = new URLSearchParams(location.search).get('id');
    this.loadContentDetail(id);//通过id请求内容详情
    //请求热门文章
    this.axios.get(this.BASE_URL+'/v1/contents/hot').then((response)=>{
      if (response.data.code==1){
        this.hotArr = response.data.data;
      }
    })
    //发请求获取评论
    this.loadCommentsById(id);

  }
}
</script>

<style scoped>
#head_div {
  height: 90px;
  background-image: url("/public/imgs/avarbg.jpg");
}
.title_p{
  margin: 0;
  height: 40px;
  overflow: hidden;/*超出不显示*/
  /*设置省略号相关样式*/
  display: -webkit-box;
  -webkit-line-clamp:2;  /*设置行数*/
  -webkit-box-orient: vertical;/*纵向*/
}
</style>